<template>

 <view class="lwp-step">

  <view class="left">

   <view class="date">

​    <slot name="date">{{ date }}</slot>

   </view>

   <view class="status">

​    <slot name="status">{{ status }}</slot>

   </view>

  </view>

  <view class="middle">

   <view class="dot" :class="{ active: activity }"> </view>

   <view class="line" :class="{ active: activity }"> </view>

  </view>

  <view class="right">

   <slot name="content">{{ content }}</slot>

  </view>

 </view>

</template>



<script>

export default {

 name: 'lwp-step',

 props: {

  date: {

   type: String,

   default: ''

  },

  status: {

   type: String,

   default: ''

  },

  activity: {

   type: Boolean,

   default: false

  },

  content: {

   type: String,

   default: ''

  }

 },

 data() {

  return {}

 }

}

</script>



<style lang="less" scoped>

.lwp-step {

 width: 100%;

 display: flex;

 justify-content: space-around;

 align-items: stretch;

 min-height: 160rpx;

 .left {

  width: 160rpx;

  .date {

   font-size: 35rpx;

   font-weight: 400;

   color: #949596;

   text-align: right;

  }

  .status {

   font-size: 24rpx;

   font-weight: 400;

   color: #4a4d50;

   text-align: right;

  }

 }

 .middle {

  width: 80rpx;

  padding: 0 32rpx;

  display: flex;

  flex-direction: column;

  justify-content: flex-start;

  align-items: center;

 }

 .right {

  flex: 1;

 }



 .dot {

  width: 30rpx;

  height: 30rpx;

  background: #e9eef7;

  border-radius: 50%;

  position: relative;

  &::after {

   content: '';

   display: block;

   position: absolute;

   width: 18rpx;

   height: 18rpx;

   background-color: #cdcdcd;

   border-radius: 50%;

   top: 15rpx;

   left: 15rpx;

   transform: translate(-50%, -50%);

  }

 }

 .active {

  &::after {

   background-color: #275db6;
   
  }

 }



 .line {

  position: relative;

  width: 1px;

  height: 100%;

  background-color: #E9EEF7;

 }

}

</style>